<template>
    <div @click="handleClick" class="button-box flex-center-row-start" :style="{backgroundColor:bgColor}"
         @mouseleave="handleResetColor"
         @mouseenter="handleActiveColor">
      <div class="button-icon flex-center-row">
        <i :class="iconClass" ></i>
      </div>
      <div class="button-text">
        <slot></slot>
      </div>
    </div>
</template>

<script>
    export default {
        name: "YButton",
        props:{
          icon:String,
          activeColor:{
            type:String,
            default:"white"
          },
          activeBgColor:{
            type:String,
            default:"teal"
          },
          defaultBgColor:{
            type:String
          }

        },
        data(){
          return{
            iconClass:this.icon,
            bgColor:"",
            color:"",
            defaultActiveBgColor:"teal",
            defaultActiveColor:"white"
          }
        },
        methods:{
          handleActiveColor(args){
              this.bgColor=this.activeBgColor
              this.color=this.activeColor
          },
          handleResetColor(args){
            this.bgColor=this.defaultBgColor?this.defaultBgColor:'white'
            this.color="black"
          },
          handleClick(event){
            this.$emit("click",event)
          }
        },
        mounted() {
          this.bgColor=this.defaultBgColor
        },
      watch:{
          icon:function(newV){

              this.iconClass=newV
          },

        }
    }
</script>

<style scoped lang="less">
  @Button-width:40px;
  .button-box{
      border-radius: @Button-width;
      background-color: white;
      width: @Button-width;
      height: @Button-width;
      min-width: 30px;
      min-height: 30px;
      transition: all 0.6s;
      cursor: pointer;
      overflow: hidden;
      .button-icon{
        width: @Button-width;
        height:@Button-width;
        min-width: @Button-width;
        min-height: @Button-width;
        border-radius: @Button-width;
        overflow: hidden;

      }
      .button-text{
        width: 0;
        text-wrap: none;
        overflow: hidden;
        white-space:nowrap; /* 不换行 */
        font-size: 16px;

        /*下面两行css让文本框的光标隐藏*/
        text-shadow: 0 0 0 #fff;
        color: transparent;
      }


  }
  .button-box:hover{
      width: 130px;
      color: white;
      border-radius: @Button-width;
  }
  .button-box:hover .button-icon{
  }
  .button-box:hover .button-text{
      width: 100px;
  }
</style>
